<template>
  <view class="home">

    <view class="house-box">
      <house-info type="2" :houseInfo="data.houseInfo"></house-info>
    </view>
    <view class="house-gap"></view>
    <view class="house-box u-p-b-0">
      <form-item :formJson="formJson">
        <template #action="{form}">
          <view class="action-bar u-flex-y-center u-flex-between">
            <view class="u-flex-y-center">
              <text style="font-size: 26rpx;">实付金额：</text>
              <u-text :text="`￥${data.houseInfo.look_price}`" color="#DF0F0F" size="18"></u-text>
            </view>
            <up-button type="warning" shape="circle" color="#F87610"
              :customStyle="{width:'232rpx',height:'76rpx',margin:0}" @click="_reservation(form)">提交支付</up-button>
          </view>
        </template>
      </form-item>
    </view>
    <view class="house-gap"></view>
    <view class="house-box ">
      <u-text text="预约看房费" color="#000" size="28rpx" bold></u-text>
      <view class="u-flex-y-center u-m-t-20">
        <u-text text="费用金额" color="#000" size="28rpx"></u-text>
        <u-text :text="`￥${data.houseInfo.look_price}`" color="#E22020" align="right" size="28rpx"></u-text>
      </view>
    </view>
  </view>
  <back-page></back-page>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  import houseInfo from './components/house-info.vue';
  import formItem from '@/components/form-item/form-item.vue'
  import { houseDetail, reservation } from '../../config/api';
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ''
    }
  })
  const formJson = ref([{
    type: 'text',
    key: 'real_name',
    border: true,
    required: true,
    label: '姓名',
    placeholder: '请输入姓名'
  }, {
    type: 'text',
    key: 'id_card',
    border: true,
    required: true,
    label: '身份证',
    placeholder: '请输入身份证号'
  }, {
    type: 'text',
    key: 'user_phone',
    required: true,
    label: '手机号',
    border: true,
    placeholder: '请输入手机号'
  }, {
    type: 'datetime',
    key: 'scheduled_time',
    key_text: 'scheduled_time_text',
    required: true,
    label: '看房时间',
    placeholder: '请选择看房时间'
  }])
  const data = ref({
    houseInfo: {}
  })
  onMounted(() => {
    _houseDetail()
  })
  const _houseDetail = () => {
    houseDetail({ id: props.id }).then(res => {
      data.value.houseInfo = res.data
    })
  }
  // 房源预定
  const _reservation = (row) => {
    reservation({ house_id: props.id, ...row }).then(res => {
      uni.requestPayment({
        ...res.data,
        success: (res) => {
          uni.navigateBack()
        },
        fail: err => {
          console.log(err)
        }
      })
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
  }

  .house-box {
    background: #fff;
    padding: 20rpx;

    ::v-deep .u-row {
      flex-wrap: wrap;
    }

    ::v-deep .u-form-item__body__left__content__label {
      font-size: 30rpx !important;
      font-weight: 500;
    }

    ::v-deep .u-form-item__body {
      padding: 30rpx 0 !important;
    }

    ::v-deep .u-form-item__body__left__content__required {
      left: auto !important;
      right: -12rpx;
    }
  }

  .house-gap {
    height: 16rpx;
    width: 100%;
    background: #f7f6fa;
  }

  .action-bar {
    padding: 30rpx;
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 16rpx solid #f8f8f8;
    z-index: 9;

    .action-text {
      color: #F3440E;
      font-size: 24rpx;
      margin-bottom: 20rpx;
    }
  }
</style>